<!--  -->
<template>
  <div class="cart_box">
    <div class="h50">
      <my-tab-bar
        title="购物车"
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
      >
      </my-tab-bar>
    </div>
    <ul class="cart_list_box">
      <li v-for="item in list" :key="item.goodsId">
        <van-checkbox v-model="item.checked" class="checked_box"></van-checkbox>
        <van-card :title="item.goodsName" :thumb="item.goodsCoverImg">
          <template #price>
            <span>￥{{ item.sellingPrice.toFixed(2) }}</span>
          </template>
<template #num>
            <van-stepper
              :value="item.goodsCount"
              @change="changeCount(item, $event)"
            />
          </template>
</van-card>
</li>
</ul>
<van-submit-bar :price="total * 100" button-text="提交订单" @submit="onSubmit">
    <van-checkbox v-model="checkedAll">全选</van-checkbox>
</van-submit-bar>
</div>
</template>

<script>
    import {
        getCart,
        addGoodsCount
    } from "../api";
    import {
        Toast
    } from "vant";
    export default {
        data() {
            return {
                list: [],
                timer: null
            };
        },
        created() {
            this.getData();
            this.$store.dispatch("updateCartNum");
        },
        computed: {
            // checkedAll() {
            //     return this.list.every((item) => item.checked)
            // },

            checkedAll: {
                //每当用户修改选中的状态的时候 我们都需要更新选中的id
                get() {
                    let temp = this.list
                        .filter((item) => item.checked)
                        .map((item) => item.cartItemId);
                    this.$store.commit("updateCartItemIds", temp.join(","));
                    return this.list.every((item) => item.checked);
                },
                set(val) {
                    this.list.forEach((item) => {
                        item.checked = val;
                    });
                },
            },
            total() {
                return this.list.reduce((prev, cur) => {
                    return prev + (cur.checked ? cur.sellingPrice * cur.goodsCount : 0);
                }, 0);
            },
        },
        methods: {
            onClickLeft() {
                this.$router.back();
            },
            getData() {
                getCart().then((data) => {
                    console.log(data)
                    this.list = data.data.map((item) => {
                        item.checked = true;
                        return item;
                    });
                });
            },
            //进步器改变，正常情况下进步器改变要发送后台，连续点击要加防抖
            
            changeCount(item, n) {
                console.log(item, n)
                Toast.loading({
                    forbidClick: true
                });
                clearTimeout(this.timer); 
                this.timer = setTimeout(() => {
                    addGoodsCount({
                        goodsCount: n,
                        cartItemId: item.cartItemId,
                    }).then((data) => {
                        console.log(data)
                        Toast.clear();
                        if (data.resultCode == 200) {
                            item.goodsCount = n;
                        }
                    });
                }, 1000);
            },
            onSubmit() {
                if (this.$store.state.cartItemIds) {
                    this.$router.push('/address')
                } else {
                    Toast.fail("请选择购买的商品");
                }
            },
        },
    };
</script>
<style lang='less' scoped>
    .cart_box {
        .cart_list_box {
            text-align: left;
            li {
                position: relative;
                .checked_box {
                    position: absolute;
                    left: 5px;
                    top: 50%;
                    z-index: 20;
                }
            }
        }
    }
</style>